<template>
	<div>
		<div class="goods">
			<div class="menu-wrapper" ref="menuWrapper">
				<ul>
					<li v-for="(item,index) in goods" 
					    class="menu-item" 
					    :class="{'current':currentIndex===index}"
					    @click="selectMenu(index)"
					>
						<span class="text border-bottom">
							<span 
							v-show="item.type>0"
							class="icon"
							:class="classMap[item.type]"
						></span>{{item.name}}</span>	
					</li>
				</ul>
			</div>
			<div class="foods-wrapper" ref="foodWrapper">
				<ul>
					<li 
					   v-for="(item,index) in goods"
					   :key="index"
					   class="food-list"
					   ref="foodList"
					>
						<h1 class="title">{{item.name}}</h1>
						<ul>
							<li v-for="(food,index) in item.foods"
							    class="food-item border-bottom"
							    :key='index'
							    @click="selectFood(food)"
							>
								<div class="icon">
									<img :src="food.icon" width="57" height="57">
								</div>
								<div class="content">
									<p class="name">{{food.name}}</p>
									<p class="desc">{{food.description}}</p>
									<div class="extra">
										<span class="count">月售{{food.sellCount}}份</span>
										<span>好评率{{food.rating}}</span>
									</div>
									<div class="price">
										<span class="now">￥{{food.price}}</span>
										<span class="old" v-show="food.oldPrice">￥
										{{food.oldPrice}}</span>
									</div>
									<div class="cartcontrol-wrapper">
										<cartcontrol :food="food" @cartAdd="addFood"></cartcontrol>
									</div>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<shopcar 
				:selectFoods="selectFoods"
				:deliveryPrice="seller.deliveryPrice"
				:minPrice="seller.minPrice"
				ref="shopcar"
			></shopcar>
		</div>
		<food :food="selectedFood" ref="food" @cartAdd="addFood"></food>
	</div>
</template>

<script>
	import axios from 'axios'
	import BScroll from 'better-scroll'
	import shopcar from 'components/shopcar/shopcar'
	import cartcontrol from 'components/cartcontrol/cartcontrol'
	import food from 'components/food/food'
	export default {
		data() {
			return {
				goods: [],
				listHeight: [],
				scrollY: 0,
				selectedFood:{}
			}
		},
		props: {
			seller: Object,
		},
		created() {
			this.classMap = ['decrease','discount','special','invoice','guarantee']
		},
		computed: {
			currentIndex() {
				for(let i=0;i<this.listHeight.length;i++){
					let height1 = this.listHeight[i];
					let height2 = this.listHeight[i+1];
					if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)) {
						return i;
					}
				}
				return 0;
			},
			selectFoods() {
				let foods = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) =>{
						if(food.count){
							foods.push(food)
						}
					})
				})
				return foods;
			}
		},
		methods: {
			getGoods() {
		      axios.get('/api/goods.json')
		      .then(this.getGoodsSucc)
		    },
		    getGoodsSucc(res) {
		      res=res.data
		      if (res.ret && res) {
		        const data = res
		        this.goods=data.goods
		        this.$nextTick(() =>{
		        	this._initScroll();
		        	this._calculateHeight();
		        })
		      }
		    },
		    selectMenu(index,event) {
		    	
		    	let foodList = this.$refs.foodList
		    	let el = foodList[index];
		    	this.foodScroll.scrollToElement(el,300)
		    },
		    addFood(target) {
		    	this._drop(target);
		    },
		    _drop(target) {
		    	//体验优化，异步执行下落动画
		    	this.$nextTick(() => {
		    		this.$refs.shopcar.drop(target)
		    	})
		    },
		    _initScroll() {
		    	this.menuScroll = new BScroll(this.$refs.menuWrapper,{click: true});
		    	this.foodScroll = new BScroll(this.$refs.foodWrapper,{probeType: 3,click: true});
		    	this.foodScroll.on('scroll',(pos)=>{
		    		if(pos.y <= 0){
		    			this.scrollY =Math.abs(Math.round(pos.y));
		    	    }
		    	})
		    },
		    _calculateHeight() {
		    	let foodList = this.$refs.foodList;
		    	let height = 0;
		    	this.listHeight.push(height);
		    	for(let i=0;i<foodList.length;i++){
		    		let item = foodList[i];
		    		height +=item.clientHeight;
		    		this.listHeight.push(height);
		    	}
		    },
		    selectFood(food) {
		    	this.selectedFood = food;
		    	this.$refs.food.show()
		    }
		},
		mounted() {
			this.getGoods();
		},
		components:{
			shopcar,
			cartcontrol,
			food
		}
	}
</script>

<style lang="stylus" scoped>
	@import "~common/stylus/mixin.styl"
	@import '~common/stylus/varibles.styl'
	  .goods
	    display: flex
	    position: absolute
	    top: 174px
	    bottom: 46px
	    width: 100%
	    overflow: hidden
	    .menu-wrapper
	      flex: 0 0 80px
	      width: 80px
	      background: #f3f5f7
	      .menu-item
	        display: table
	        height: 54px
	        width: 56px
	        padding: 0 12px
	        line-height: 14px
	        &.current
	        	position relative
	        	z-index 10
	        	margin-top -1px
	        	background #fff
	        	font-weight 700
	        	.text
	        		border-none
	        .icon
	          display: inline-block
	          vertical-align: top
	          width: 12px
	          height: 12px
	          margin-right: 2px
	          background-size: 12px 12px
	          background-repeat: no-repeat
	          &.decrease
	            bg-image('decrease_3')
	          &.discount
	            bg-image('discount_3')
	          &.guarantee
	            bg-image('guarantee_3')
	          &.invoice
	            bg-image('invoice_3')
	          &.special
	            bg-image('special_3')
	        .text
	          display: table-cell
	          width: 56px
	          vertical-align: middle
	          font-size: 12px
	          border-bottom(rgba(7,17,27,0.1))
	    .foods-wrapper
	      flex: 1
	      .title
	        padding-left: 14px
	        height: 26px
	        line-height: 26px
	        border-left: 2px solid #d9dde1
	        font-size: 12px
	        color: $bgColor
	        background: #f3f5f7
	      .food-item
	        display: flex
	        margin: 18px
	        padding-bottom: 18px
	        border-bottom(rgba(7,17,27,0.1))
	        &:last-child
	          border-none()
	          margin-bottom 0
	        .icon
	          flex: 0 0 57px
	          margin-right: 10px
	        .content
	          flex: 1
	          .name
	            margin: 2px 0 8px 0
	            height: 14px
	            line-height: 14px
	            font-size: 14px
	            color: $themeColor
	          .desc, .extra
	            line-height: 15px
	            font-size: 10px
	            color: $bgColor
	          .desc
	            margin-bottom: 8px
	          .extra
	          	.count
	          		margin-right 12px
	          .price
	          	font-weight 700
	          	line-height 24px
	          	.now
	          		margin-right 18px
	          		font-size 14px
	          		color $activeColor
	          	.old
	          		text-decoration line-through
	          		font-size 10px
	          		color $bgColor
	          .cartcontrol-wrapper
	          	position absolute
	          	right 0px
	          	bottom 12px
	          		
	          		
	        		
	        	  
      
</style>